<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /*
    编程式导航  router.push接收三个参数,第二个参数和第三个参数可选

    //promise失败的返回值返回什么控制台就会展示什么
    搜索框中重复点击时会返回一个失败的promise,这个失败的promise没有处理,不影响功能
    .then方法接受两个回调函数,分别处理成功promise实例和失败promise实例的逻辑,第二个回调函数可以不写,
    .catch方法,调用catch方法的promise实例变为失败状态会执行catch中的回调函数,catch方法的作用和then方法的第二个回调函数作用一致
    当promise返回一个失败的promise实例,在后面书写.then 和 .catch,分别接收一个回调函数,不需要在函数中处理什么,promise在控制台中就不会报错了,   
    */



    // const p1 = new Promise((resolve, reject) => {
    //   setTimeout(() => {
    //     // resolve()
    //     reject('NavigationDuplicated: Avoided redundant navigation to current location: "/search".')
    //   }, 2000)
    // })
    /*function push(location) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // resolve()
          reject('NavigationDuplicated: Avoided redundant navigation to current location: "/search".')
        }, 2000)
      }).then(()=>{}).catch(()=>{})
    }*/


    //push函数接受3个参数,第二个参数是处理成功状态的回调函数,第三个参数是处理失败状态的回调函数
    //在push被调用的时候第二个,第三个要传回调函数作为参数,在回调函数中不用做什么,控制台中 就不会再报错
    function push(location, onComplete, onAbort) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('NavigationDuplicated: Avoided redundant navigation to current location: "/search".')
        }, 2000)
      })
        .then(onComplete)
        .catch(onAbort)
    }

    push('123', () => { }, () => { })


  </script>
</body>

</html>